<template>
  <!-- 瀑布流信息 -->
  <div class="waterfallInfo">
    <!-- 加载状态 -->
    <StaryeaLoading v-if="loading"></StaryeaLoading>
    <!-- 标题 -->
    <div class="title">瀑布流信息</div>
    <!-- 瀑布流信息 -->
    <div class="comInfo">
      <div class="item">
        <div class="label">瀑布流名称</div>
        <div class="infoCon">
          <el-input v-model="list.flowName" disabled></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">大厅分类</div>
        <div class="infoCon">
          <el-select v-model="list.businessId" placeholder="请选择" disabled>
            <el-option v-for="item in optionsId" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="label">导航栏</div>
        <div class="infoCon">
          <el-select v-model="list.navId" placeholder="请选择" disabled>
            <el-option v-for="item in optionsNavId" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="label">基本套餐</div>
        <div class="infoCon">
          <el-radio-group v-model="list.packageType" placeholder="请选择" disabled>
            <el-radio v-for="item in optionsType" :key="item.value" :label="item.value">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="item">
        <div class="label">SPID</div>
        <div class="infoCon">
          <el-input type="text" :rows="4" v-model="list.spId" disabled></el-input>
        </div>
      </div>
      <div class="item">
        <div class="label">背景图片</div>
        <div class="infoCon">
          <Upload :params="uploadParams" :imgListData="firstImg" :disabled="disabledType" @fileList="getImgList1"
            @removeImg="removeImg1"></Upload>
          <div class="tips">此为第一屏背景</div>
        </div>
      </div>
      <div class="item">
        <div class="label">背景图片</div>
        <div class="infoCon">
          <Upload :params="uploadParams" :imgListData="otherImg" :disabled="disabledType" @fileList="getImgList2"
            @removeImg="removeImg2"></Upload>
          <div class="tips">此为其他屏背景</div>
        </div>
      </div>
      <div class="item">
        <div class="label">瀑布流描述</div>
        <div class="infoCon">
          <el-input type="textarea" :rows="3" v-model="list.description" :disabled="disabledType"></el-input>
        </div>
      </div>
      <div class="btn" v-if="!disabledType">
        <el-button round @click="submit" type="primary">
          <span style="margin-right:10px">保</span><span style="margin-left:10px">存</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from '@/commont/plugins/uploadImg.vue' //图片上传
export default {
  name: 'waterfallInfo',
  components: { Upload },
  props: {
    waterfallData: {
      type: Object,
      default: () => { },
      required: true,
    },
    disabledType: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: this.waterfallData,
      uploadParams: {
        type: 'list',//类型
        url: '/iptv/epg/sichuan/categoryaudit/addPictures',//上传接口路径
        limit: 1,//限制数量
      },
      optionsId: [],
      optionsNavId: [],
      optionsType: [],
    }
  },
  computed: {
    firstImg: {
      get: function () {
        if (this.waterfallData.bgUrl == null || this.waterfallData.bgUrl == "") {
          return this.bgUrlList;
        } else {
          this.bgUrlList = [{ url: this.waterfallData.bgUrl }];
          return this.bgUrlList
        }
      },
      set: function (newVal) {
        console.log('set', newVal);
      }
    },
    otherImg() {
      if (this.waterfallData.bg2Url == null || this.waterfallData.bg2Url == "") {
        return this.bg2UrlList;
      } else {
        this.bg2UrlList = [{ url: this.waterfallData.bg2Url }];
        return this.bg2UrlList
      }
    },
  },
  mounted() {
    // this.getOptionsID();
    // this.getOptionsNavId();
    // this.getOptionsType();
  },
  methods: {
    // 大厅分类查询
    getOptionsID() {
      requestBusinessType({}, 'select').then(res => {
        let { result_code, result_msg, data } = res;
        if (result_code == 0) {
          if (data.length > 0) {
            data.forEach(item => {
              this.optionsId.push({
                label: item.businessName,
                value: item.businessId
              });
            })
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 业务类型 - 导航栏
    getOptionsNavId() {
      requestWaterfall({ paramType: 2 }, 'selectParams').then(res => {
        let { result_code, result_msg, data } = res;
        if (result_code == 0) {
          if (data.length > 0) {
            data.forEach(item => {
              this.optionsNavId.push({
                label: item.paramValue,
                value: item.paramKey
              });
            })
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 基础套餐
    getOptionsType() {
      requestWaterfall({ paramType: 1 }, 'selectParams').then(res => {
        let { result_code, result_msg, data } = res;
        if (result_code == 0) {
          if (data.length > 0) {
            data.forEach(item => {
              this.optionsType.push({
                label: item.paramValue,
                value: item.paramKey
              });
            })
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 首屏背景图
    getImgList1(data) {
      console.log(data);
      this.list.bgUrl = data.fileByteUrl;
    },
    removeImg1(data) {
      this.list.bgUrl = "";
    },
    // 其他屏背景图
    getImgList2(data) {
      this.list.bg2Url = data.fileByteUrl;
    },
    removeImg2(data) {
      this.list.bg2Url = "";
    },
    // 保存
    submit() {
      let params = {
        id: this.list.id,
        bgUrl: this.list.bgUrl,
        bg2Url: this.list.bg2Url,
        description: this.list.description
      }
      console.log('修改参数', params);
      requestWaterfall(params, 'update').then(res => {
        let { result_code, result_msg } = res;
        if (result_code == 0) {
          this.$message({ message: '修改成功', type: 'success' });
          this.$emit('refresh');//刷新瀑布流信息
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.waterfallInfo {
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  margin-left: 5px;
  margin-bottom: 20px;

  // 标题
  .title {
    margin-left: 15px;
    font-weight: bold;
  }

  // 瀑布流信息
  .comInfo {
    margin-top: 10px;
    margin-left: 5px;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      border-bottom: 1px dashed #dbdbdb;

      &:nth-last-child(1) {
        border: none;
      }

      .label {
        position: relative;
        width: 80px;
        color: #CFCFD2;

        .mark {
          position: absolute;
          left: -8px;
          top: 3px;
          color: red;
          font-weight: normal;
        }
      }

      .infoCon {
        width: calc(100% - 80px);
      }
    }

    .btn {
      margin-top: 25px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
  }

  // 提示信息
  .tips {
    color: red;
    opacity: .7;
    font-size: 12px !important;
  }
}
</style>

<style lang="scss" scoped>
// input
::v-deep .el-input__inner {
  padding: 0px 10px;
  height: 35px;
  line-height: 35px;
}

// textarea
::v-deep .el-textarea__inner {
  resize: none;
  padding: 5px 10px;
}

// select
::v-deep .el-select {
  width: 100%;
}

// 按钮
::v-deep .el-button.is-round {
  padding: 8px 40px;
  border-radius: 15px;
}

::v-deep .el-button--primary {
  background-color: #3089fd;
  border-color: #3089fd;
}

::v-deep .el-button--primary:focus,
.el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;
}

// 单选
::v-deep .el-radio {
  width: 105px !important;
  margin: 5px 0px 15px 5px;
}

::v-deep .el-radio__label {
  padding-left: 5px !important;
}

::v-deep .el-radio__inner {
  border-radius: 0 !important;
}

::v-deep .el-radio__input {
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
}

::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  border-radius: 0;
  background-color: unset;
  box-sizing: content-box;
  content: "";
  border: 1px solid #c0c4cc;
  border-left: 0;
  border-top: 0;
  height: 0.4375rem;
  left: 0.25rem;
  position: absolute;
  top: 1px;
  -webkit-transform: rotate(45deg) scaleY(1);
  transform: rotate(45deg) scaleY(1);
  width: 0.1875rem;
  transition: -webkit-transform .15s ease-in .05s;
  transition: transform .15s ease-in .05s;
  transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
  transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
  -webkit-transform-origin: center;
}

::v-deep .el-radio__inner::after {
  border-radius: 0;
  background-color: unset;
  box-sizing: content-box;
  content: "";
  border: 1px solid #FFF;
  border-left: 0;
  border-top: 0;
  height: 0.4375rem;
  left: 0.25rem;
  position: absolute;
  top: 1px;
  -webkit-transform: rotate(45deg) scaleY(0);
  transform: rotate(45deg) scaleY(0);
  width: 0.1875rem;
  transition: -webkit-transform .15s ease-in .05s;
  transition: transform .15s ease-in .05s;
  transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
  transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
  -webkit-transform-origin: center;
}
</style>
